<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBC编辑器 - Professional CAN Database Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- 顶部工具栏 -->
    <header class="header">
        <div class="header-left">
            <h1>🔧 DBC编辑器</h1>
            <span class="version">v2.0.0</span>
        </div>
        <div class="header-center">
            <button id="openBtn" class="btn btn-primary">
                📁 打开DBC
            </button>
            <button id="downloadBtn" class="btn btn-success">
                💾 下载DBC
            </button>
            <button id="fullscreenBtn" class="btn btn-secondary">
                🔍 全屏
            </button>
        </div>
        <div class="header-right">
            <span class="status" id="status">就绪</span>
        </div>
    </header>

    <!-- 隐藏的文件输入 -->
    <input type="file" id="fileInput" accept=".dbc" style="display: none;">

    <!-- 主要内容区域 -->
    <main class="main-content">
        <!-- CAN消息表格 -->
        <section class="section">
            <div class="section-header">
                <h2>📨 CAN消息 <span id="messageCount">(0)</span></h2>
                <div class="section-actions">
                    <button id="addMessageBtn" class="btn btn-sm btn-success">+ 添加</button>
                    <button id="removeMessageBtn" class="btn btn-sm btn-danger">- 删除</button>
                </div>
            </div>
            <div class="table-container">
                <table id="messagesTable" class="data-table">
                    <thead>
                        <tr>
                            <th width="40">选择</th>
                            <th width="150">名称</th>
                            <th width="100">CAN ID (HEX)</th>
                            <th width="100">CAN ID (DEC)</th>
                            <th width="80">类型</th>
                            <th width="60">DLC</th>
                            <th>注释</th>
                            <th width="60">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- CAN信号表格 -->
        <section class="section">
            <div class="section-header">
                <h2>📡 CAN信号 <span id="signalCount">(0)</span></h2>
                <div class="section-actions">
                    <button id="addSignalBtn" class="btn btn-sm btn-success">+ 添加</button>
                    <button id="removeSignalBtn" class="btn btn-sm btn-danger">- 删除</button>
                </div>
            </div>
            <div class="table-container">
                <table id="signalsTable" class="data-table">
                    <thead>
                        <tr>
                            <th width="40">选择</th>
                            <th width="120">名称</th>
                            <th width="80">类型</th>
                            <th width="80">字节序</th>
                            <th width="80">模式</th>
                            <th width="60">起始位</th>
                            <th width="60">长度</th>
                            <th width="80">因子</th>
                            <th width="80">偏移</th>
                            <th width="80">最小值</th>
                            <th width="80">最大值</th>
                            <th width="60">单位</th>
                            <th>注释</th>
                            <th width="60">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </section>

        <!-- 信号预览和DBC预览区域 -->
        <div class="bottom-sections">
            <!-- 信号预览 -->
            <section class="section preview-section">
                <div class="section-header">
                    <h2>🔍 CAN信号预览</h2>
                </div>
                <div class="preview-content">
                    <div class="signal-preview" id="signalPreview">
                        <div class="preview-info">
                            <p>请选择一个信号查看预览</p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- DBC预览 -->
            <section class="section dbc-section">
                <div class="section-header">
                    <h2>📄 DBC预览 <span id="dbcLineCount">(0行)</span></h2>
                    <button id="toggleDbcBtn" class="btn btn-sm btn-secondary">折叠/展开</button>
                </div>
                <div class="dbc-content">
                    <pre id="dbcPreview" class="dbc-text"></pre>
                </div>
            </section>
        </div>
    </main>

    <!-- 状态栏 -->
    <footer class="footer">
        <div class="footer-left">
            <span id="parseStats">统计: 消息 0, 信号 0, 节点 0</span>
        </div>
        <div class="footer-center">
            <span id="selectedInfo">无选择</span>
        </div>
        <div class="footer-right">
            <span>© 2024 专业DBC编辑器</span>
        </div>
    </footer>

    <!-- 加载提示 -->
    <div id="loadingOverlay" class="loading-overlay" style="display: none;">
        <div class="loading-content">
            <div class="spinner"></div>
            <p>正在解析DBC文件...</p>
        </div>
    </div>

    <script src="dbc-parser.js"></script>
    <script src="dbc-editor.js"></script>
</body>
</html> 